<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <script type="text/javascript"
        src="https://assets.pyecharts.org/assets/v5/maps/guang3_dong1_guang3_zhou1.js"></script>

</head>

<body>
    <div id="2b37f2eef2d94a92bb56fcb83f3d1b1b" class="chart-container" style="width:900px; height:500px; "></div>
    <script>
        var chart_2b37f2eef2d94a92bb56fcb83f3d1b1b = echarts.init(
            document.getElementById('2b37f2eef2d94a92bb56fcb83f3d1b1b'), 'white', { renderer: 'canvas' });
        var option_2b37f2eef2d94a92bb56fcb83f3d1b1b = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "aria": {
                "enabled": false
            },
            "color": [
                "#5470c6",
                "#91cc75",
                "#fac858",
                "#ee6666",
                "#73c0de",
                "#3ba272",
                "#fc8452",
                "#9a60b4",
                "#ea7ccc"
            ],
            "series": [
                {
                    "type": "map",
                    "name": "\u5c97\u4f4d\u6570\u91cf",
                    "label": {
                        "show": true,
                        "margin": 8
                    },
                    "map": "\u5e7f\u5dde",
                    "data": [
                        {
                            "name": "\u8d8a\u79c0\u533a",
                            "value": 30
                        },
                        {
                            "name": "\u9ec4\u57d4\u533a",
                            "value": 30
                        },
                        {
                            "name": "\u6d77\u73e0\u533a",
                            "value": 10
                        },
                        {
                            "name": "\u5929\u6cb3\u533a",
                            "value": 10
                        },
                        {
                            "name": "\u589e\u57ce\u533a",
                            "value": 10
                        },
                        {
                            "name": "\u5357\u6c99\u533a",
                            "value": 10
                        }
                    ],
                    "roam": true,
                    "aspectScale": 0.75,
                    "nameProperty": "name",
                    "selectedMode": false,
                    "zoom": 1,
                    "zlevel": 0,
                    "z": 2,
                    "seriesLayoutBy": "column",
                    "datasetIndex": 0,
                    "mapValueCalculation": "sum",
                    "showLegendSymbol": true,
                    "emphasis": {}
                }
            ],
            "legend": [
                {
                    "data": [
                        "\u5c97\u4f4d\u6570\u91cf"
                    ],
                    "selected": {},
                    "show": false,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14,
                    "backgroundColor": "transparent",
                    "borderColor": "#ccc",
                    "borderWidth": 1,
                    "borderRadius": 0,
                    "pageButtonItemGap": 5,
                    "pageButtonPosition": "end",
                    "pageFormatter": "{current}/{total}",
                    "pageIconColor": "#2f4554",
                    "pageIconInactiveColor": "#aaa",
                    "pageIconSize": 15,
                    "animationDurationUpdate": 800,
                    "selector": false,
                    "selectorPosition": "auto",
                    "selectorItemGap": 7,
                    "selectorButtonGap": 10
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "enterable": false,
                "confine": false,
                "appendToBody": false,
                "transitionDuration": 0.4,
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5,
                "order": "seriesAsc"
            },
            "title": [
                {
                    "show": true,
                    "text": "\u5e7f\u5dde\u5c97\u4f4d\u6570\u91cf\u5206\u5e03",
                    "target": "blank",
                    "subtarget": "blank",
                    "padding": 5,
                    "itemGap": 10,
                    "textAlign": "auto",
                    "textVerticalAlign": "auto",
                    "triggerEvent": false
                }
            ],
            "visualMap": {
                "show": true,
                "type": "continuous",
                "min": 10,
                "max": 30,
                "inRange": {
                    "color": [
                        "#43c6ac",
                        "#f8ffae"
                    ]
                },
                "calculable": true,
                "inverse": false,
                "splitNumber": 5,
                "hoverLink": true,
                "orient": "vertical",
                "padding": 5,
                "showLabel": true,
                "itemWidth": 20,
                "itemHeight": 140,
                "borderWidth": 0
            }
        };
        chart_2b37f2eef2d94a92bb56fcb83f3d1b1b.setOption(option_2b37f2eef2d94a92bb56fcb83f3d1b1b);
    </script>
</body>

</html>